<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/static/favicon.ico" sizes="32*32">
    <link rel="stylesheet" type="text/css" href="/static/login/sass/JD1.css" />
    <link rel="stylesheet" type="text/css" href="/static/login/sass/login.css" />
    <script src="/static/login/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
    <title>NC_EOS</title>
</head>

<body class="bs">
    <div class="top-3">
        <div id="sign">
            <div class="si_top">
                <p>
                    <span style="color:red;" th:if="${session.msg!=null}"><br/>[[${session.msg}]]</span>
                </p>
            </div>
            <div class="si_cen">
                <h2 class="act">账户登录</h2>
            </div>
            <div class="si_bom1 tab" style="display: none;">
                <div class="error">
                    <div></div>
                    请输入账户名和密码
                </div>
                <form action="/login" method="post" onsubmit="return login()">
                    <ul>
                        <div class="ermsg" style="color: red" th:text="${errors!=null? (#maps.containsKey(errors, 'msg')?errors.msg:''):''}">
                        </div>
                        <li class="top_1">
                            <img src="/static/login/img/user_03.png" class="err_img1" />
                            <input type="text" name="loginacct" placeholder=" 用户名/已验证手机" class="user" />
                        </li>
                        <li>
                            <img src="/static/login/img/user_06.png" class="err_img2" />
                            <input type="password" name="password" placeholder=" 密码" class="password" />
                        </li>
                        <li class="ent"><button class="btn2" type="submit"><a class="a">登 &nbsp; &nbsp;录</a></button></li>
                    </ul>
                </form>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    var alDiv = document.getElementsByClassName('tab');
    var alBtn = document.getElementsByTagName('h2');
    alDiv[0].style.display = 'block';
    var act = alBtn[0]
    for (var i = 0; i < alBtn.length; i++) {
        alBtn[i].indent = i;
        alBtn[i].onclick = function() {
            act.className = '';
            alDiv[act.indent].style.display = 'none';
            this.className = 'act'
            alDiv[this.indent].style.display = 'block'
            act = this
        }
    }

    var btn2 = document.getElementsByClassName('btn2')[0];
    var user = document.getElementsByClassName('user')[0];
    var pass = document.getElementsByClassName('password')[0];
    var err = document.getElementsByClassName('error')[0];
    var err_img1 = document.getElementsByClassName('err_img1')[0];
    var err_img2 = document.getElementsByClassName('err_img2')[0];
    function login(){
        if (user.value == '' || pass.value == '') {
            err_img1.src = '/static/login/img/img11.png';
            err_img2.src = '/static/login/img/img22.png';
            return false;
        }
        return true;
    }

    btn2.onclick = function() {
        if (user.value == '' || pass.value == '') {
            err.style.display = 'block';
            user.style.border = '1px solid red';
            pass.style.border = '1px solid red';
            err_img1.src = '/static/login/img/img11.png';
            err_img2.src = '/static/login/img/img22.png';
        } else {

        }
        user.onfocus = function() {
            err_img1.src = '/static/login/img/grow1.png';
            user.style.border = '1px solid #999';
        }
        pass.onfocus = function() {
            err_img2.src = '/static/login/img/grow2.png';
            pass.style.border = '1px solid #999';
        }
        user.onblur = function() {
            err_img1.src = '/static/login/img/img11.png';
            user.style.border = '1px solid red';
        }
        pass.onblur = function() {
            err_img2.src = '/static/login/img/img22.png';
            pass.style.border = '1px solid red';
        }
    }
</script>

</html>